<template>
	<view ref="free_box" class="free_box" :style="{ height: parameter.heightStyle == 2 ? 'auto' : parameter.height * 2 + 'rpx' }">
		<image :mode="parameter.heightStyle == 2?'widthFix':'scaleToFill'" class="img_bg" :src="parameter.bgImg" v-if="parameter.bgImg"></image>
		<view
			v-for="(item, index) in dataList"
			:key="index"
			class="item"
			:style="{
				width: item.style.width,
				left: item.style.left || 0,
				transform: 'translateY(' + (item.style.top || 0) + ')',
				'text-align': item.style.align || 'left',
				background: item.style.bgColor || ''
			}"
		>
			<view
				class="item_h"
				:style="{
					'padding-top': item.style.pdt
				}"
			>
				<view
					@click.stop="linkPage(item)"
					v-if="!item.type || item.type === 'text'"
					class="cont pre"
					:style="{
						'line-height': item.style.lineH ? item.style.lineH * 2 + 'rpx' : 'normal',
						'font-weight': item.style.crude ? 'bold' : '',
						'font-style': item.style.ital ? 'italic ' : '',
						'font-size': (item.style.size || 14) * 2 + 'rpx',
						color: item.style.color || '#333',
						'text-decoration': (item.style.downLine ? 'underline ' : '') + (item.style.del ? ' line-through' : '')
					}"
				>
					{{ item.freeCont }}
				</view>
				<view class="cont" @click.stop="linkPage(item)" style="width:100%;height:100%" v-else-if="item.type === 'image'">
					<image v-if="item.freeCont" class="img" :src="item.freeCont"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { pageComponentsLink } from '@/utils/jump.js';
import { configMixin } from './configMixin.js';
export default {
	mixins: [configMixin],
	data() {
		return {};
	},
	methods: {
		init() {
			let arr = this.templateItem.pageData || [];
			this.dataList = arr.map(item => {
				item.style.pdt = (item.style.height / item.style.width) * 100 + '%';
				item.style.width = item.style.width / 3.75 + '%';
				if (item.style.left) {
					let num = item.style.left / 3.75;
					item.style.left = num + '%';
				}
				if (item.style.top) {
					item.style.top = (item.style.top / item.style.height) * 100 + '%';
				}
				return item;
			});
			this.parameter = this.templateItem.parameter || {};
		},
		linkPage(item) {
			console.log(111)
			pageComponentsLink(item);
		}
	}
};
</script>

<style lang="scss" scoped>
.free_box {
	position: relative;
}
.img_bg {
	vertical-align: bottom;
}
.item {
	position: absolute;
	top: 0;
}
.cont {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.pre {
	white-space: pre-wrap;
	margin: 0;
	padding: 0;
}
.img {
	display: block;
}
</style>
